<template>
  <div>
    <BoweeControl
      ref="controlRef"
      id="controlDom"
      @message = 'message'
      :tipStatus="true"
      blueLinkText="blueLinkText"
      blueDisconnectText="blueDisconnectText"
      usbLinkText="usbLinkText"
      usbDisconnectText="usbDisconnectText"
    >
      <template v-slot:blueUnlink>
        <div>
          blueUnlink点击链接
        </div>
      </template>
      <template v-slot:blueLink>
        <div>
          blueLink点击断开
        </div>
      </template>

      <template v-slot:usbUnlink>
        <div>
          usbUnlink点击链接
        </div>
      </template>
      <template v-slot:usbLink>
        <div>
          usbLink点击断开
        </div>
      </template>
    </BoweeControl>

    <div class="btn" @click="blueLink">点击链接蓝牙</div>
    <div class="btn" @click="blueDisconnect">点击断开蓝牙</div>

    <div class="btn" @click="usbLink">点击链接usb</div>
    <div class="btn" @click="usbDisconnect">点击断开usb</div>

    <div class="btn" @click="getLinkStatus">获取连接状态</div>
    <div>blue连接状态:{{blueScanBtnShow}}</div>
    <div>ubs链接状态:{{usbScanBtnShow}}</div>
    <div>链接文字:{{selectLinkText}}</div>

    <div>
      <input type="text" v-model="write.wind.value">
      <div class="btn" @click="sendMessage">设置 风速</div>
    </div>

    <div>
      <input type="text" v-model="write.temperature.value">
      <div class="btn" @click="sendMessage">设置 温度</div>
    </div>

    <div>
      <input type="text" v-model="write.deviceName.value">
      <div class="btn" @click="sendMessage">设置 设备名称</div>
    </div>
  </div>
</template>
<script setup>
import {BoweeControl} from '@gaidalou/control'
import {onMounted, ref, toRaw} from "vue";

let controlRef = ref(null)

const message = (blueValue) => {
  console.log('message',blueValue)
}

let write = ref({
  deviceName:{value:'测试设备5'},
  temperature:{value:'23'},
  wind:{value:'11.5'},
})

let sendMessage = ()=>{
  controlRef.value.sendMessage(toRaw(write.value))
}

let blueLink = ()=>{
  controlRef.value.blueLink()
}
let blueDisconnect = ()=>{
  controlRef.value.blueDisconnect()
}

let usbLink = ()=>{
  controlRef.value.usbLink()
}
let usbDisconnect = ()=>{
  controlRef.value.usbDisconnect()
}


let blueScanBtnShow = ref();
let usbScanBtnShow = ref();
let selectLinkText = ref();
let getLinkStatus = ()=>{
  let res = controlRef.value.getLinkStatus();
  blueScanBtnShow.value = res.blueScanBtnShow;
  usbScanBtnShow.value = res.usbScanBtnShow;
  selectLinkText.value = res.selectLinkText;
}

onMounted(()=>{
  console.log('controlRef===>',controlRef.value)
  console.log('controlDom===>',document.getElementById('controlDom'))
})

</script>
<style scoped>
.btn{
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>
